<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .message_wrap {
      width: 50%;
      margin: 20px auto;
      border: 4px solid rebeccapurple;
    }

    .msg_input {
      display: flex;

    }

    .msg_input input {
      width: 320px;
    }

    .msg_img {
      width: 300px;
      display: flex;
      justify-content: space-around;
    }

    .msg_img img {
      width: 40px;
      height: 40px;
      cursor: pointer;
    }

    .msg_img .active {
      opacity: 0.5;
    }

    #msg_content {
      width: 90%;
      margin-top: 20px;
    }

    .msg_send {
      display: flex;
      justify-content: flex-end;
      padding-right: 50px;
      box-sizing: border-box;
      margin-top: 20px;
    }

    .list_one {
      width: 90%;
      margin: 10px auto;
      border-bottom: 1px dotted #e5e5e5;
      display: flex;
      cursor: pointer;
    }

    .list_one:hover {
      background: #ddd;
    }

    .list_one:hover .del {
      display: block;
    }

    .list_one img {
      width: 80px;
      height: 80px;
    }

    .msg_info {
      width: 600px;
      margin-left: 20px;
    }

    .user_name {
      margin-right: 30px;
      font-weight: bold;
    }

    .del {
      width: 60px;
      display: none;
    }
  </style>
</head>

<body>
  <div class="message_wrap">
    <h2>来说说你现在在做什么，想什么</h2>
    <div class="msg_input">
      <input type="text" id="username">
      <div class="msg_img">
        <img class="active" src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">
      </div>
    </div>
    <textarea id="msg_content" cols="30" rows="10"></textarea>
    <div class="msg_send">
      <h2 id="tips">还能输入140个字</h2>
      <button id="sendBtn">广播</button>
    </div>
    <div class="list_title">
      大家在说：
    </div>
    <div class="msg_list">

      <!-- <div class="list_one">
        <img src="./images/1.png" alt="">
        <div class="msg_info">
          <div>
            <span class="user_name">名字</span><span>萨拉丁客户发到付</span>
          </div>
          <div>2020-12-20</div>
        </div>
        <button class="del">删除</button>
      </div> -->
    </div>
  </div>
  <script>
    // 剩余文字提示----------------------------------------
    var msg_content = document.getElementById("msg_content"); //输入留言的文本域
    var tips = document.getElementById("tips");//显示剩余字符的h2
    msg_content.onkeyup = function () {
      var num = 140;
      var msgVal = this.value; //输入到文本域的内容
      num = num - msgVal.length + 1;  //剩余字符  140-输入字符的length
      if (num <= 0) {
        tips.style.color = "red"
        msg_content.value = msgVal.substr(0, 140);
      } else {
        tips.style.color = "black"
      }
      tips.innerHTML = "还可以输入" + num + "个文字";
    }
    // 头像样式切换---------------------------------------------
    var imgs = document.querySelectorAll(".msg_img img");
    for (var i = 0; i < imgs.length; i++) {
      imgs[i].onclick = function () {
        for (var j = 0; j < imgs.length; j++) {
          imgs[j].className = ""
        }
        this.className = "active"
      }
    }
    // 增加留言--------------------------------------------------
    var msgarr = []; //当前页面操作数据  
    if (localStorage.msgarr) {
      msgarr = JSON.parse(localStorage.msgarr)
    } else {
      localStorage.msgarr = JSON.stringify([])
    }
    //点击广播增加留言 -------------------------------------
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function () {
      // 获取带有active的class的图片
      var nowImg = document.querySelector(".msg_img .active"); //当前的头像
      var usernameEle = document.getElementById("username")//用户名的输入框
      // 收集的 要添加到存储的数据
      var obj = {
        imgsrc: nowImg.src,//图片地址
        username: usernameEle.value,//用户名
        msg: msg_content.value,//留言信息
        date: new Date().toLocaleString() //时间
      }
      if (usernameEle.value && msg_content.value) {
        msgarr.unshift(obj) //在头部添加
        localStorage.msgarr = JSON.stringify(msgarr);//把添加好的数据放到本地存储
        loadList() //添加完成 从新渲染列表
      } else {
        alert("用户名或留言内容不能为空")
      }
      console.log(obj)
      // 清空输入框
      usernameEle.value = "";
      msg_content.value = "";
    }
    // 数据渲染--------------------------------------------------
    var msg_list = document.querySelector(".msg_list"); //留言列表
    function loadList() {
      msgarr = JSON.parse(localStorage.msgarr)
      var str = ""
      for (var i = 0; i < msgarr.length; i++) {
        str += `
          <div class="list_one">
          <img src="${msgarr[i].imgsrc}" alt="">
          <div class="msg_info">
            <div>
              <span class="user_name">${msgarr[i].username}</span><span>${msgarr[i].msg}</span>
            </div>
            <div>${msgarr[i].date}</div>
          </div>
          <button class="del" onclick="del(${i})">删除</button>
        </div>
      `
      }
      msg_list.innerHTML = str;
    }
    loadList()//首次进入页面渲染
    // 删除方法---------------------------------------------------------
    function del(index) {
      // 通过下标删除
      msgarr.splice(index, 1)//删除本页面的数组
      localStorage.msgarr = JSON.stringify(msgarr)
      loadList()//删除后从新渲染列表
    }
  </script>
</body>

</html>